function draw() {
    var canvas = document.getElementById('tutorial');
    if (canvas.getContext) {
        var ctx = canvas.getContext('2d');
        drawGradient(ctx);
    }
}

function drawGrid(ctx) {
    var levels = 150;
    var size = Math.floor(150 / levels);
    for (var i = 0; i < levels; ++i) {
        for (var j = 0; j < levels; ++j) {
            ctx.fillStyle = 'rgb(' + Math.floor((levels - i) * 255 / levels)
                + ',' + Math.floor((levels - j) * 255 / levels) + ', 0)';
            ctx.fillRect(j * size, i * size, size, size);
        }
    }
}

function drawStroke(ctx) {
    var levels = 6;
    var size = Math.floor(150 / levels);
    for (var i = 0; i < levels; ++i) {
        for (var j = 0; j < levels; ++j) {
            ctx.strokeStyle = 'rgb(0, '
                + Math.floor((levels - i) * 255 / levels) + ','
                + Math.floor((levels - j) * 255 / levels) + ')';
            ctx.beginPath();
            ctx.arc(size / 2 + size * j, size / 2 + size * i, size * 2 / 5,
                    0, Math.PI * 2, true);
            ctx.stroke();
        }
    }

}

function drawGradient(ctx) {
    var lingrad = ctx.createLinearGradient(0, 0, 150, 150);
    lingrad.addColorStop(0, '#00ABEB');
    lingrad.addColorStop(0.5, '#fff');
    lingrad.addColorStop(0.5, '#26C000');
    lingrad.addColorStop(1, '#fff');

    var lingrad2 = ctx.createLinearGradient(0, 0, 95, 95);
    lingrad2.addColorStop(0.5, '#000');
    lingrad2.addColorStop(1, 'rgba(0, 0, 0, 0)');
    // assign gradients to fill and stroke styles
    ctx.fillStyle = lingrad;
    ctx.strokeStyle = lingrad2;

    ctx.fillRect(10, 10, 130, 130);
    ctx.strokeRect(50, 50, 50, 50);
}
